<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body bgcolor="#E0EAE8">
<!--年：<select id="yselect" ></select>
月：<select id="mselect"><option >1</option><option>2</option><option>3</option><option>4</option>
    <option>5</option><option>6</option><option>7</option><option>8</option>
    <option>9</option><option>10</option><option>11</option><option>12</option></select>-->

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 700px;height:600px;display: inline-block;margin-top: 50px;margin-left: 100px;"></div>
<div id="main1" style="width: 700px;height:600px;display: inline-block;margin-top: 50px"></div>
<script type="text/javascript">

    let date = new Date();
    let currYear = date.getFullYear();
    let currMonth = date.getMonth()+1;

    //动态添加下拉年份
    for (let i = currYear-4; i <= currYear; i++) {
        $("#yselect").append("<option>"+i+"</option>");
    }
    //赋予默认值
    $("#yselect").val(currYear);
    $("#mselect").val(currMonth);
    //当年改变时触发
    $("#yselect").change(function(){
        showOperLogChart($(this).val(),$("#mselect").val());
    });
    //当月改变时触发
    $("#mselect").change(function(){
        showOperLogChart($("#yselect").val(),$(this).val());
    });

    //初始化方法，默认当前年月
    showOperLogChart(currYear,date.getMonth()+1);
    // 展示图标方法
    function showOperLogChart(year,month) {
        //let xData=[];
        let user1Data=[];
        let user2Data=[];
        let user3Data=[];
        let business_top_type1Data=[];
        let business_top_type2Data=[];
        let business_top_type3Data=[];
        let business_top_type4Data=[];

        $.ajax({
            url: "/business/queryShowChartData",
            type: "GET",
            data: {year: year, month:month},
            async: false,
            dataType: "json",
            success: function (resp) {
                if (resp.code === 0) {
                    let data = resp.data;
                    for (let i = 0; i < data.length; i++) {
                        //xData.push(data[i].day);
                        user1Data.push(data[i].user1);
                        user2Data.push(data[i].user2);
                        user3Data.push(data[i].user3);
                        business_top_type1Data.push(data[i].business_top_type1);
                        business_top_type2Data.push(data[i].business_top_type2);
                        business_top_type3Data.push(data[i].business_top_type3);
                        business_top_type4Data.push(data[i].business_top_type4);
                    }
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '业务量',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '业务量',
                    type: 'pie',
                    radius: ['80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'left'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: user1Data, name: 'Enzo'},
                        {value: user2Data, name: 'Back'},
                        {value: user3Data, name: 'Ivan'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        var myChart1 = echarts.init(document.getElementById('main1'));
        var option1 = {
            title: {
                text: '业务类型',
                subtext: '',
                right: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                right: 'center'
            },
            series: [
                {
                    name: '业务类型',
                    type: 'pie',
                    radius: ['80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'right'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: business_top_type1Data, name: '商标'},
                        {value: business_top_type2Data, name: '版权'},
                        {value: business_top_type3Data, name: '专利'},
                        {value: business_top_type4Data, name: '知识产权'}
                    ]
                }
            ]
        };
        myChart1.setOption(option1);
    };
</script>
</body>
</html>